<template>
  <Modal :show="show">
    <div class="desktop-neutron-kit-modal-content">
      <div class="wallet-kit-modal-content-left">
        <div
          style="
            font-size: 18px;
            font-weight: 800;
            margin-left: 16px;
            transform: translateY(-1px);
            padding-bottom: 8px;
            position: sticky;
            top: 0;
            background: #1a1b1f;
          "
        >
          Connect a Wallet
        </div>
        <div style="margin-top: 8px">
          <DesktopOptions :wallet="selectWallet" @select-wallet="checkWallet" />
        </div>
      </div>
      <div class="wallet-kit-modal-content-gap"></div>
      <div class="wallet-kit-modal-content-right">
        <!--      title      -->
        <ModalHeader
          :uid="DesktopModalConstant?.CONTEXT_UID"
          :stack-frame="currentStackFrame"
          @back="backStack"
          @close="closeModal"
        />
        <div style="height: calc(100% - 30px); overflow: hidden">
          <!--      初始化时显示      -->
          <ModalContent
            v-if="!selectWallet"
            :current-stack-frame="currentStackFrame"
            start-with="init"
            v-model:wallet="selectWallet"
            @change-step="changeStepModalContent"
          />
          <!--      没安装浏览器扩展，但是有移动端app      -->
          <ModalContent
            v-else-if="
              selectWallet &&
              selectWallet.getQrCodeUri &&
              selectWallet.isWalletKitConnector &&
              selectWallet.ready &&
              !selectWallet.installed
            "
            :current-stack-frame="currentStackFrame"
            start-with="noExtAndHaveApp"
            v-model:wallet="selectWallet"
            @open-official-wallet-connect-modal="openOfficialWalletConnectModal"
            @change-step="changeStepModalContent"
          />
          <!--      已安装浏览器扩展，或者是三方连器      -->
          <div
            v-else-if="selectWallet && selectWallet.ready"
            class="have-select-wallet-content"
          >
            <img
              style="width: 44px; height: 44px; border-radius: 4px"
              :src="selectWallet.icon ?? selectWallet.iconUrl"
            />
            <div style="font-size: 18px; text-align: center">
              <div style="font-weight: bold">
                Opening {{ selectWallet.name }}...
              </div>
              <div style="color: #ffffff99; font-size: 14px">
                Confirm connection in the extension
              </div>
            </div>
            <Spinner :width="28" :height="28" v-if="isConnecting" />
            <button v-else @click="connectWallet">RETRY</button>
          </div>
          <!--    没安装浏览器扩展，也没有移动端app，去下载扩展   -->
          <ModalContent
            v-else
            :current-stack-frame="currentStackFrame"
            start-with="noExtAndApp"
            v-model:wallet="selectWallet"
            @change-step="changeStepModalContent"
          />
        </div>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import Modal from './index.vue'
import ModalContent from './ModalContent.vue'
import Spinner from '../Icons/Spinner.vue'
import ModalHeader from './ModalHeader.vue'
import DesktopOptions from '../ConnectOptions/DesktopOptions.vue'
import { useAccount } from '@wagmi/vue'
import { useModalContext } from '../../hooks/useModalContext'
import { ref } from 'vue'
import type { WalletConnector } from '../../wallets/useWalletConnectors'
import { addLatestWalletId } from '../../wallets/latestWalletId'
import { DesktopModalConstant } from '../../constants/ModalContextConstant'
import { useConnectModal } from '../../hooks/useConnectModal'

withDefaults(
  defineProps<{
    show: boolean
  }>(),
  {
    show: false,
  },
)


const { isConnecting, status } = useAccount()

const { currentStackFrame, toStack, backStack } = useModalContext({
  uid: DesktopModalConstant?.CONTEXT_UID,
})

// 选择的钱包
const selectWallet = ref<WalletConnector>()

const checkWallet = (wallet: WalletConnector) => {
  addLatestWalletId(wallet.name)

  selectWallet.value = wallet

  if (!wallet.ready) {
    toStack(0, {
      title: 'Get ' + wallet.name,
    })
  } else {
    if (
      wallet.getQrCodeUri &&
      wallet.isWalletKitConnector &&
      wallet.id !== 'coinbase'
    ) {
      toStack(0, {
        title: 'Scan with ' + wallet.name,
      })
    } else {
      toStack(0, {
        title: '',
      })
    }
  }

  connectWallet()
}

const connectWallet = async () => {
  if (selectWallet.value?.ready) {
    await selectWallet.value?.connect()
    closeModal()
  }
}

const openOfficialWalletConnectModal = () => {
  if (selectWallet.value && selectWallet.value.showWalletConnectModal) {
    selectWallet.value.showWalletConnectModal()
    closeModal()
  }
}

const changeStepModalContent = ({
  stackFrame,
  modalTitle,
  type,
}: {
  stackFrame: number
  modalTitle: string
  type?: string // 这个最后引导前要区分端用的，一开始是没这个字段
}) => {
  toStack(stackFrame, {
    title: modalTitle,
    type,
  })
}

const { closeConnectModal } = useConnectModal({
  onClose() {
    selectWallet.value = undefined
    toStack(0, {
      title: '',
      haveBackIcon: false,
    })
  },
})

const closeModal = () => {
  closeConnectModal()
}
</script>

<style lang="scss" scoped>
button {
  cursor: pointer;
  padding: 4px 12px;
  transition: all 0.3s ease;
  border: none;
  background: #d9fc01;
  color: #1a1b1f;
  border-radius: 24px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 16px;
  &:hover {
    transform: scale(1.05);
  }
  &:active {
    transform: scale(0.95);
  }
}
.wallet-kit-modal-content-left,
.wallet-kit-modal-content-right {
  position: relative;
  margin: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.wallet-kit-modal-content-left {
  width: 287px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  flex-shrink: 0;
}
.wallet-kit-modal-content-right {
  width: 100%;
}
.wallet-kit-modal-content-gap {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.have-select-wallet-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  height: calc(100% - 30px);
}
</style>
